.system_theme_purple {
  --theme-color: #a222f7;
  --active-color: #a09cff;

  --common-bgc-01: #e8e8ff;
  --common-bgc-02: #fcfcfd;
  --common-bgc-03: #e7e0fc;
  --common-bgc-04: #f1ebff;

  --hover-bgc-01: #f4f1ff;
  --hover-bgc-02: #eae5ff;
  --hover-bgc-03: #e1daff;
  --hover-bgc-04: #efecfc;
}

.system_theme_green {
  --theme-color: #8cdd00;
  --active-color: #97ffd5;

  --common-bgc-01: #f5ffe1;
  --common-bgc-02: #d9f99d;
  --common-bgc-03: #e7ffb3;
  --common-bgc-04: #a7f3d0;

  --hover-bgc-01: #d9f99d;
  --hover-bgc-02: #a7f3d0;
  --hover-bgc-03: #f7fee7;
  --hover-bgc-04: #ecfccb;
}

.system_theme_skyBlue {
  --theme-color: #38bdf8;
  --active-color: #60a5fa;

  --common-bgc-01: #e0f2fe;
  --common-bgc-02: #dbeafe;
  --common-bgc-03: #bae6fd;
  --common-bgc-04: #eff6ff;

  --hover-bgc-01: #eff6ff;
  --hover-bgc-02: #e0f2fe;
  --hover-bgc-03: #bae6fd;
  --hover-bgc-04: #dbeafe;
}

.system_theme_pink {
  --theme-color: #f9a8d4;
  --active-color: #f472b6;

  --common-bgc-01: #fdf2f8;
  --common-bgc-02: #ffe4e6;
  --common-bgc-03: #fce7f3;
  --common-bgc-04: #fff1f2;

  --hover-bgc-01: #fff1f2;
  --hover-bgc-02: #fdf2f8;
  --hover-bgc-03: #ffe4e6;
  --hover-bgc-04: #ffe4e6;
}

.system_theme_orange {
  --theme-color: #e5af00;
  --active-color: #fbbf24;

  --common-bgc-01: #fef3c7;
  --common-bgc-02: #fffbeb;
  --common-bgc-03: #fde68a;
  --common-bgc-04: #fffbeb;

  --hover-bgc-01: #ecffc7;
  --hover-bgc-02: #fef3c7;
  --hover-bgc-03: #fffbeb;
  --hover-bgc-04: #ecfccb;
}

.system_theme_red {
  --theme-color: #f43f5e;
  --active-color: #dc2626;

  --common-bgc-01: #fecdd3;
  --common-bgc-02: #ffb3b3;
  --common-bgc-03: #fee2e2;
  --common-bgc-04: #fff1f2;

  --hover-bgc-01: #fff1f2;
  --hover-bgc-02: #fee2e2;
  --hover-bgc-03: #fdb1b1;
  --hover-bgc-04: #fecdd3;
}


:root {
  .system_theme_purple;
  --header-bar-height: 48px;
}

[system_theme_color='purple'] {
  .system_theme_purple;
}

[system_theme_color='green'] {
  .system_theme_green;
}

[system_theme_color='skyBlue'] {
  .system_theme_skyBlue;
}

[system_theme_color='pink'] {
  .system_theme_pink;
}

[system_theme_color='orange'] {
  .system_theme_orange;
}

[system_theme_color='red'] {
  .system_theme_red;
}